<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个性化图表的样式</title>
    <script src="js/echarts.js"></script>
    <style>
        div{
            border: 1px dotted #eee;
        }
    </style>
</head>
<body>
<div id="ex1" style="width: 600px;height: 400px"></div>

<div id="ex2" style="width: 600px;height: 400px"></div>

<div id="ex3" style="width: 600px;height: 400px"></div>

<script>
    var ex1 =   document.getElementById('ex1');
    ex1 =   echarts.init(ex1);
    ex1.setOption({
        title:{
            text:'访问来源'
        },
        series:{
            name:"访问来源",
            type:"pie",
            radius:"60%",
            data:[
                {value:400,name:"搜索引擎"},
                {value:335,name:"直接访问"},
                {value:310,name:"右键营销"},
                {value:278,name:"广告联盟"},
                {value:230,name:"视频广告"}
            ]
        }
    });

    var ex2 =   document.getElementById('ex2');
    ex2 =   echarts.init(ex2);
    var ex2Data =   {
        title:{
            text:'浏览器份额'
        },
        series:{
            type:"pie",
            data:[
//                {name:"Chrome"},
//                {name:"IE8.0"},
//                {name:"IE9.0"},
//                {name:"QQ"},
//                {name:"2345"},
//                {name:"搜狗"},
//                {name:"IE7.0"},
//                {name:"Firefox"},
//                {name:"IE10.0"},
//                {name:"其它"}

                { value:4024,name:"Chrome" },
                { value:1445,name:"IE8.0" },
                { value:630,name:"IE9.0" },
                { value:582,name:"QQ" },
                { value:498,name:"2345" },
                { value:450,name:"搜狗" },
                { value:396,name:"IE7.0" },
                { value:204,name:"Firefox" },
                { value:187,name:"IE10.0" },
                { value:1583,name:"其它" }
            ]
        }
    };
    ex2.setOption(ex2Data);

    var ex3 =   document.getElementById('ex3');
    ex3 =   echarts.init(ex3);
    var ex3Data =   {
        title:{
            text:'浏览器份额'
        },
        series:{
            type:"pie",
            roseType: 'angle',
            data:[
                { value:40.24,name:"Chrome" },
                { value:14.45,name:"IE8.0" },
                { value:6.30,name:"IE9.0" },
                { value:5.82,name:"QQ" },
                { value:4.98,name:"2345" },
                { value:4.50,name:"搜狗" },
                { value:3.96,name:"IE7.0" },
                { value:2.04,name:"Firefox" },
                { value:1.87,name:"IE10.0" },
                { value:15.83,name:"其它" }
            ]
        }
    };
    ex3.setOption(ex3Data);
</script>
</body>
</html>